<template>
  <!--<div class="editor-textarea-box">
    <div name="content" id="content" placeholder="编辑内容"
         :style="{minHeight: ckEditorContHeight + 'px'}"></div>
  </div>-->
  <div class="editor">
    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
      <div class="menubar">

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.bold() }"
            @click="commands.bold"
        >
          <!--<f7-icon f7="add"></f7-icon>-->
          bold
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.italic() }"
            @click="commands.italic"
        >
          italic
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.strike() }"
            @click="commands.strike"
        >
          strike
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.underline() }"
            @click="commands.underline"
        >
          underline
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.code() }"
            @click="commands.code"
        >
          code
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.paragraph() }"
            @click="commands.paragraph"
        >
          paragraph
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.heading({ level: 1 }) }"
            @click="commands.heading({ level: 1 })"
        >
          H1
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.heading({ level: 2 }) }"
            @click="commands.heading({ level: 2 })"
        >
          H2
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.heading({ level: 3 }) }"
            @click="commands.heading({ level: 3 })"
        >
          H3
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.bullet_list() }"
            @click="commands.bullet_list"
        >
          bullet_list
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.ordered_list() }"
            @click="commands.ordered_list"
        >
          ordered_list
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.blockquote() }"
            @click="commands.blockquote"
        >
          blockquote
        </button>

        <button
            class="menubar__button"
            :class="{ 'is-active': isActive.code_block() }"
            @click="commands.code_block"
        >
          code_block
        </button>

        <button
            class="menubar__button"
            @click="commands.horizontal_rule"
        >
          horizontal_rule
        </button>

        <button
            class="menubar__button"
            @click="commands.undo"
        >
          undo
        </button>

        <button
            class="menubar__button"
            @click="commands.redo"
        >
          redo
        </button>

      </div>
    </editor-menu-bar>

    <editor-content class="editor__content editor-textarea-box" :editor="editor"/>
  </div>
</template>

<script>
  import Http from '../../js/mod.http';

  import {Editor, EditorContent, EditorMenuBar} from 'tiptap'
  import {
    Blockquote,
    CodeBlock,
    HardBreak,
    Heading,
    HorizontalRule,
    OrderedList,
    BulletList,
    ListItem,
    TodoItem,
    TodoList,
    Bold,
    Code,
    Italic,
    Link,
    Strike,
    Underline,
    History,
  } from 'tiptap-extensions'

  export default {
    props: ['content', 'isEditor', 'ckHeight'],
    components: {
      EditorContent,
      EditorMenuBar,
    },
    data() {
      return {
        cont: '',
        is_editor: false,
        ckEditorContHeight: 300,

        editor: new Editor({
          extensions: [
            new Blockquote(),
            new BulletList(),
            new CodeBlock(),
            new HardBreak(),
            new Heading({levels: [1, 2, 3]}),
            new HorizontalRule(),
            new ListItem(),
            new OrderedList(),
            new TodoItem(),
            new TodoList(),
            new Link(),
            new Bold(),
            new Code(),
            new Italic(),
            new Strike(),
            new Underline(),
            new History(),
          ],
          content: '',
        }),
      }
    },
    created: function () {
      var _this = this;
      _this.$f7.utils.nextTick(function () {

      });
    },
    watch: {},
    beforeDestroy() {
      this.editor.destroy();
    },
    methods: {}
  }
</script>

<style scoped>
  .editor-textarea-box {
    height: 100%;
    padding: 5px;
    min-height: 360px !important;
    border: 1px solid #eee;
  }

  .editor__content .ProseMirror, .editor__content .ProseMirror-focused, .editor__content div {
    height: 100%;
    width: 100%;
  }

  .menubar__button {
    width: auto;
    padding: 3px;
  }

</style>